<template>
  <div id="login">
       <!-- form section start -->
    <section class="w3l-hotair-form">
        <div class="container">
            <!-- /form -->
            <div class="workinghny-form-grid">
                <div id="login-main-container" class="main-hotair">
                    <div class="alert-close">
                        <span class="fa fa-close"></span>
                    </div>
                 
                    <div id="login-left-container" class="content-wthree">
                        <h2>Log In</h2>
                        <p>To Your Account</p>
                        <el-form  ref="form" status-icon  :rules="rules" :model="form" label-width="80px">
                        <el-form-item label="用戶名" prop="username">
                          <el-input v-model="form.username" style="width:95%"></el-input>
                        </el-form-item>
                        
                        <el-form-item label="密碼" prop="password">
                          <el-input  v-model="form.password" style="width:95%" show-password></el-input>
                        </el-form-item>

                        <div class="button-container1">
                          
                            <el-button type="primary" @click="submitForm('form')" >登入</el-button>
                        </div>
                      </el-form>
                       
                    </div>
                    <div id="rightpic" class="w3l_form align-self">
                        <div class="left_grid_info">
                            
                        </div>
                    </div>
                </div>
            </div>
            <!-- //form -->
        </div>
    </section>
  </div>
</template>

<script>
export default {
    name:'login',
    data() {
      return {
         form: {
            username: '',
            password: '',
          },
         rules:{
            username: [
                { required: true, message: '请输入用戶名', trigger: 'blur' },
                { min: 5, max: 100, message: '长度在 5 个字符以上', trigger: 'blur' }
              ],
            password:[
                { required: true, message: '请输入密碼', trigger: 'blur' },
                { min: 6, max: 100, message: '长度在 8 个字符以上', trigger: 'blur' }
            ]
         }
      
     }
    },
    methods: {
       submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            //alert('submit!');
            var that=this;
            this.$axios.get("http://localhost:8081/login?name="+this.form.username+"&password="+this.form.password)
            .then((result) => {
               //console.log(result.data);

               //保存至html里.....
               let obj={
                 username:this.form.username,
                 password:this.form.password,
                 userSessionId:result.data.sessionId
               }

               localStorage.setItem('userInfo',JSON.stringify(obj))
               let obj1=localStorage.getItem('userInfo');
               console.log(result.data.msg);

            if(result.data.msg=="登錄成功"){
                
                that.$router.push({path:"/homepage/firstpage"})
                console.log('hi');

              }else{
                  this.$message.error('帳號或者密碼錯誤');
              }
              
            })
          } 
        });
      },
      /**
       * @description 
       * @應先看看session有沒有過期
       * @檢查有沒有session
       * @有則轉到首頁
       */
      async checkSession(){
         let obj=JSON.parse(localStorage.getItem('userInfo'))
         if(obj==null || obj.userSessionId==''){
           this.$message({
                      showClose: true,
                      message: '請登錄',
                      type: 'error'
                    });

          return ;
         }
         
         /*
         await this.$axios.get('http://localhost:8081/checkLogin?sessionId='+obj.userSessionId)
               .then(res=>{
                 //這里是驗證有沒有過期
                 console.log(res)
                 
                 if(res.data!=false){
                   this.$router.push('/homepage/firstpage')
                 }
                 else if(localStorage.getItem("userInfo").userSessionId!=''){
                    this.$message({
                      showClose: true,
                      message: '請重新登錄,你的session過期了',
                      type: 'warning'
                    });
                 }
               })
         */
         
      }

    },
    mounted() {
      this.checkSession()
    },
}
</script>

<style>
    #login-main-container{
      width: 800px;
      height: 500px;
    }
    #login-left-container{
      width: 400px;
      height: 500px;
      padding: 48px;
    }
    #rightpic{
      width: 200px;
    }
  
   #login{
     width: 100%;
     height: 100%;
     border: 1px solid;
     border-radius: 40px;
     border-color: #C0C4CC;
     box-shadow: 0px 0px 2px 2px #C0C4CC;
   }
   .welcome{
     width: 100%;
     padding-bottom: 40px;
   }
   .login-container{
     
   }
   .button-container1{
     width:150px;
     position: absolute;
     bottom: 35%;
     left: 20%;
   }
</style>